<script setup>
import {ref} from "vue";

const sidebarVisible = ref(true)
const menus = ref([
  {
    separator: true
  },
  {
    label: 'Documents',
    items: [
      {
        label: 'New',
        icon: 'pi pi-plus',
        shortcut: '⌘+N'
      },
      {
        label: 'Search',
        icon: 'pi pi-search',
        shortcut: '⌘+S'
      }
    ]
  },
  {
    label: 'Profile',
    items: [
      {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      }, {
        label: 'Settings',
        icon: 'pi pi-cog',
        shortcut: '⌘+O'
      },
      {
        label: 'Messages',
        icon: 'pi pi-inbox',
        badge: 2
      },
      {
        label: 'Logout',
        icon: 'pi pi-sign-out',
        shortcut: '⌘+Q'
      }
    ]
  },
  {
    separator: true
  }
])
</script>

<template>
  <div class="flex w-screen h-screen">
    <!--    SideBar-->
    <div class="h-full transition-all duration-300 ease-in-out bg-sky-950 text-white flex flex-col"
         :class="sidebarVisible ? 'w-80 translate-x-0' : 'w-0 -translate-x-full'">
      <div class="h-20 flex items-center justify-center">
        <p class="text-2xl">LOGO</p>
      </div>
      <div class="grow relative">
        <ScrollPanel class="absolute top-0 bottom-0 w-full">
          <Menu :model="menus">
            <template #submenuheader="{ item }">
              <span class="text-primary font-bold leading-none">{{ item.label }}</span>
            </template>
            <template #item="{ item, props }">
              <a v-ripple class="flex items-center" v-bind="props.action">
                <span :class="item.icon"/>
                <span class="ml-2">{{ item.label }}</span>
                <Badge v-if="item.badge" class="ml-auto" :value="item.badge"/>
                <span v-if="item.shortcut"
                      class="ml-auto border border-surface-200 dark:border-surface-700 rounded-md bg-surface-100 dark:bg-surface-700 text-xs p-1">{{
                    item.shortcut
                  }}</span>
              </a>
            </template>
          </Menu>
        </ScrollPanel>
      </div>
      <div class="h-20 flex items-center">
        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2"
                shape="circle"/>
        <span class="inline-flex flex-col justify-start">
                        <span class="font-bold">Amy Elsner</span>
                        <span class="text-sm">Admin</span>
                    </span>
      </div>
    </div>
    <div class="h-full grow flex flex-col">
      <!--   Header    -->
      <div class="w-full h-20 flex items-center shadow-lg">
        <button @click="sidebarVisible = !sidebarVisible">点点点点</button>
      </div>
      <!--   Content   -->
      <div class="w-full grow bg-slate-200 p-5">
        测试
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
